<template>
	<view>
		<!-- 添加标题，显示当前选择的课程 -->
		<view class="course-title">{{ selectedCourse }} 家教</view>
		
		<view v-for="teacher in teachers" :key="teacher.account" class="teacher-box">
			<image :src="teacher.avatar" alt="" class="teacher-avatar" />
			<view class="teacher-info">
				<view class="teacher-name">姓名: {{ teacher.name }}</view>
				<view class="teacher-speciality">专业: {{ teacher.speciality }}</view>
				<view class="teacher-background">学历: {{ teacher.background }}</view>
				<view class="teacher-introduction">简介: {{ teacher.introduction }}</view>
				<!-- 移除教授课程的展示 -->
				<view class="detail-button" @click="goToDetailPage(teacher.account, selectedCourse)">
					查看详情
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				teachers: [],
				selectedCourse: 'Chemistry' // 默认值，根据需求替换为实际的课程名称
			};
		},
		onLoad(options) {
		    this.selectedCourse = options.course; // 从页面参数获取课程名称
		    this.loadTeachers();
		},
		methods: {
			loadTeachers() {
				// 请求教师信息和他们教授该课程的情况
				console.log(this.selectedCourse);
				this.$request.get(`/teacher/selectByCourse?course=${this.selectedCourse}`).then(res => {
					if (res.code === '200') {
						this.teachers = res.data || [];
					} else {
						console.error('获取教师数据失败:', res.msg);
					}
				}).catch(error => {
					console.error('请求失败:', error);
				});
			},
			goToDetailPage(account, course) {
				// 使用微信小程序的跳转 API，传递教师账号和课程名称
				wx.navigateTo({
					url: `/pages/detail/teacherDetail?account=${account}&course=${course}`
				});
			}
		}
	};
</script>

<style>
	.course-title {
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
		margin: 20rpx 0;
		color: #333;
	}

	.teacher-box {
		display: flex;
		margin-bottom: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
	}
	.teacher-avatar {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		object-fit: cover;
		margin-right: 20rpx;
	}
	.teacher-info {
		flex: 1;
	}
	.teacher-name {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	.teacher-speciality,
	.teacher-background,
	.teacher-introduction {
		margin-bottom: 10rpx;
		font-size: 28rpx;
		color: #666;
	}
	.detail-button {
		margin-top: 20rpx;
		padding: 10rpx 20rpx;
		background-color: #007bff;
		color: #fff;
		text-align: center;
		border-radius: 5rpx;
		cursor: pointer;
	}
</style>
